<template>
  <div id="root">
    <Topbar />
    <slot name="nav" />
    <slot name="banner" />
    <div class="app-main">
      <slot />
    </div>
    <slot name="footer" />
    <Footer />
  </div>
</template>
<script setup lang="ts">
import Topbar from './Default/Topbar.vue'
import Footer from './Default/Footer.vue'
import { ProjectName } from '~~/config'

useHead({
  titleTemplate: `%s - ${ProjectName}`,
  bodyAttrs: {
    class: 'light',
  },
})
</script>
